<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>CQUTWeb</title>
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
		<style type="text/css">
/* 				.mainContent {
			    font-family:Georia,serif;
			    background:#ddd;
			    font-weight:bold;
			    font-size:15px;
			    color:#333;
			    overflow: hidden;
			    -webkit-font-smoothing:antialiased;
			} */

			.container {
				overflow: hidden;
				height: 80vh;
			}
			.mainContent a{
			    text-decoration:none;
			    color:#555;
			}
			.clr{
			    width:0;
			    height:0;
			    overflow: hidden;
			    clear:both;
			    padding:0;
			    margin:0;
			}
			.nav{
			    width:100%;
			    position:absolute;
			    left:0;
			    /* bottom:0; */
				top: -50%;
			    font-family:"Josefin Slab","Myriad pro" ,serif;
			}
			.nav input,.nav a{
			    width:18%;
			    height:34px;
			    line-height:34px;
			    position:fixed;
			    bottom:0;
			    cursor:pointer;
			}
			.nav input{
			    opacity:0;
			    z-index:1000;
			}
			.nav a{
			    z-index:10;
			    font-weight:700;
			    font-size:16px;
			    background:#e23a6e;
			    color:#fff;
			    text-align:center;
			    text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
			}
			#nav1,#nav1 + a{
			    left:13%;
			}
			#nav2,#nav2 + a{
			    left:31%;
			}
			#nav3,#nav3 + a{
			    left:49%;
			}
			#nav4,#nav4 + a{
			    left:67%;
			}
			#nav5,#nav5 + a{
			    left:85%;
			}
			.nav input:checked + a,
			.nav input:checked:hover +a{
			    background:#821134;
			}
			.nav input:checked + a:after{
			    content:"";
			    width:0;
			    height:0;
			    overflow:hidden;
			    border:20px solid transparent;
			    border-bottom-color:#821134;
			    position:absolute;
			    bottom:100%;
			    left:50%;
			    margin-left:-20px;
			}
			.nav input:hover + a{
			    background:#AD244f;
			}
			.scroll,.panel{
			    width:100%;
			    height:75vh;
			    position:relative;
			    text-align:center;
				top:15%;
			    padding-top:250px;
			}
			.scroll{
			    left:0;
			    top:0;
			    -webkit-transform: translate3d(0, 0, 0);
			    -moz-transform: translate3d(0, 0, 0);
			    -ms-transform: translate3d(0, 0, 0);
			    -o-transform: translate3d(0, 0, 0);
			    transform: translate3d(0, 0, 0);
			    -webkit-backface-visibility: hidden;
			    -moz-backface-visibility: hidden;
			    backface-visibility: hidden;
			    -webkit-transition: all 0.6s ease-in-out;
			    -moz-transition: all 0.6s ease-in-out;
			    -o-transition: all 0.6s ease-in-out;
			    transition: all 0.6s ease-in-out;
			    color:#e23a6e;
			    font-weight:bold;
			}
			.panel{
			    background:#fff;
			    overflow: hidden;
			}
			/*动画*/
			#nav1:checked ~ .scroll #panel1 h1{
			    -webkit-animation: moveDown 0.6s ease-in-out 0.2s backwards;
			    -o-animation: moveDown 0.6s ease-in-out 0.2s backwards;
			    animation: moveDown 0.6s ease-in-out 0.2s backwards;
			}
			#nav2:checked ~ .scroll #panel2 h1{
			    -webkit-animation: moveDown 0.6s ease-in-out 0.2s backwards;
			    -o-animation: moveDown 0.6s ease-in-out 0.2s backwards;
			    animation: moveDown 0.6s ease-in-out 0.2s backwards;
			}
			#nav3:checked ~ .scroll #panel3 h1{
			    -webkit-animation: moveDown 0.6s ease-in-out 0.2s backwards;
			    -o-animation: moveDown 0.6s ease-in-out 0.2s backwards;
			    animation: moveDown 0.6s ease-in-out 0.2s backwards;
			}
			#nav4:checked ~ .scroll #panel4 h1{
			    -webkit-animation: moveDown 0.6s ease-in-out 0.2s backwards;
			    -o-animation: moveDown 0.6s ease-in-out 0.2s backwards;
			    animation: moveDown 0.6s ease-in-out 0.2s backwards;
			}
			#nav5:checked ~ .scroll #panel5 h1{
			    -webkit-animation: moveDown 0.6s ease-in-out 0.2s backwards;
			    -o-animation: moveDown 0.6s ease-in-out 0.2s backwards;
			    animation: moveDown 0.6s ease-in-out 0.2s backwards;
			}
			@keyframes moveDown {
			    0%{
			        -webkit-transform: translateY(-40px);
			        -moz-transform: translateY(-40px);
			        -ms-transform: translateY(-40px);
			        -o-transform: translateY(-40px);
			        transform: translateY(-40px);
			        opacity:0;
			    }
			    100%{
			        -webkit-transform: translateY(0);
			        -moz-transform: translateY(0);
			        -ms-transform: translateY(0);
			        -o-transform: translateY(0);
			        transform: translateY(0);
			        opacity:1;
			    }
			}
			.panel p{
			    color:#000;
			    margin-top:20px;
			}
			#nav1:checked ~ .scroll{
			     -webkit-transform: translateY(0%);
			     -moz-transform: translateY(0%);
			     -ms-transform: translateY(0%);
			     -o-transform: translateY(0%);
			     transform: translateY(0%);
			 }
			#nav2:checked ~ .scroll{
			    -webkit-transform: translateY(-100%);
			    -moz-transform: translateY(-100%);
			    -ms-transform: translateY(-100%);
			    -o-transform: translateY(-100%);
			    transform: translateY(-100%);
			}
			#nav3:checked ~ .scroll{
			    -webkit-transform: translateY(-200%);
			    -moz-transform: translateY(-200%);
			    -ms-transform: translateY(-200%);
			    -o-transform: translateY(-200%);
			    transform: translateY(-200%);
			}
			#nav4:checked ~ .scroll{
			    -webkit-transform: translateY(-300%);
			    -moz-transform: translateY(-300%);
			    -ms-transform: translateY(-300%);
			    -o-transform: translateY(-300%);
			    transform: translateY(-300%);
			}
			#nav5:checked ~ .scroll{
			    -webkit-transform: translateY(-400%);
			    -moz-transform: translateY(-400%);
			    -ms-transform: translateY(-400%);
			    -o-transform: translateY(-400%);
			    transform: translateY(-400%);
			}
			.icon{
			    width:200px;
			    height:200px;
			    background:#fa96b5;
			    -webkit-transform:translateY(-50%) rotate(45deg);
			    -moz-transform:translateY(-50%) rotate(45deg);
			    -ms-transform:translateY(-50%) rotate(45deg);
			    -o-transform:translateY(-50%) rotate(45deg);
			    transform:translateY(-50%) rotate(45deg);
			    position:absolute;
			    left:50%;
			    top:0;
			    margin-left:-100px;
			}
			[data-icon]:after{
			    content:attr(data-icon);
			    width:200px;
			    height:200px;
			    color:#fff;
			    font-size:90px;
			    text-align:center;
			    line-height:200px;
			    position:absolute;
			    left:18%;
			    top:18%;
			    -webkit-transform: rotate(-45deg);
			    -moz-transform: rotate(-45deg);
			    -ms-transform: rotate(-45deg);
			    -o-transform: rotate(-45deg);
			    transform: rotate(-45deg);
			}
				.panelColor{
					background:#fa96b5;
					color:#fff;
				}
				.panelColor .icon{
					background:#fff;
					color:#fa96b5;
				}
				.panelColor .icon:after{
					color:#fa96b5;
				}
				.scroll .panel h1{
					font-size:60px;
				}
				@media screen and (max-device-width: 520px){
				
				}
		</style>
	</head>
	<body class="layui-layout-body">
		<div class="layui-layout layui-layout-admin">
			<div class="layui-header">
				<div class="layui-logo">企业管理系统</div>
				<!-- 头部区域（可配合layui已有的水平导航） -->
				<ul class="layui-nav layui-layout-left">
					<li class="layui-nav-item"><a href="">控制台</a></li>
					<li class="layui-nav-item"><a href="">商品管理</a></li>
					<li class="layui-nav-item"><a href="">用户</a></li>
					<li class="layui-nav-item">
						<a href="javascript:;">其它系统</a>
						<dl class="layui-nav-child">
							<dd><a href="">邮件管理</a></dd>
							<dd><a href="">消息管理</a></dd>
							<dd><a href="">授权管理</a></dd>
						</dl>
					</li>
				</ul>
				<ul class="layui-nav layui-layout-right">
					<li class="layui-nav-item">
						<a href="javascript:;">
							<img src="img/logo.png" class="layui-nav-img">
							太阳花
						</a>
						<dl class="layui-nav-child">
							<dd><a href="">基本资料</a></dd>
							<dd><a href="">安全设置</a></dd>
						</dl>
					</li>
					<li class="layui-nav-item"><a href="">退出</a></li>
				</ul>
			</div>

			<div class="layui-side layui-bg-black">
				<div class="layui-side-scroll">
					<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
					<ul class="layui-nav layui-nav-tree" lay-filter="test">
						<li class="layui-nav-item layui-nav-itemed">
							<a class="" href="javascript:;">客户管理</a>
							<dl class="layui-nav-child">
								<!-- class属性用于批量给菜单添加点击事件，crmurl用于指定菜单对应的页面 -->
								<dd><a class="crmsidemenu" crmurl="customer/customerlist.html" href="javascript:;">客户基本资料</a></dd>
								<dd><a class="crmsidemenu" crmurl="contact/contactlist.html" href="javascript:;">客户联系人</a></dd>
								<!-- <dd><a class="crmsidemenu" crmurl="customer/customerlost.html" href="javascript:;">客户流失管理</a></dd> -->
								<dd><a class="crmsidemenu" crmurl="record/recordlist.html" href="javascript:;">客户交往记录</a></dd>
								<dd><a class="crmsidemenu" crmurl="customer/historicalOrder.html" href="javascript:;">客户历史订单</a></dd>
							</dl>
						</li>
						<li class="layui-nav-item">
							<a class="" href="javascript:;">营销管理</a>
							<dl class="layui-nav-child">
								<dd><a class="crmsidemenu" href="javascript:;" crmurl="salesManage/cus_salesManage.html">销售机会管理</a></dd>
								<dd><a class="crmsidemenu" crmurl="development/developmentPlan.html" href="javascript:;">开发计划</a></dd>
							</dl>
						</li>
						<li class="layui-nav-item">
							<a class="" href="javascript:;">服务管理</a>
							<dl class="layui-nav-child">
								<dd><a class="crmsidemenu" crmurl="service/serviceCreation.html" href="javascript:;">服务创建</a></dd>
								<dd><a class="crmsidemenu" crmurl="service/serviceDistribution.html" href="javascript:;">服务分配</a></dd>
								<dd><a class="crmsidemenu" crmurl="service/serveprocesses.html" href="javascript:;">服务处理</a></dd>
								<dd><a class="crmsidemenu" crmurl="service/servefeedback.html" href="javascript:;">服务反馈</a></dd>
								<dd><a class="crmsidemenu" crmurl="service/checkarchivedserver.html" href="javascript:;">服务归档</a></dd>
							</dl>
						</li>
						<li class="layui-nav-item">
							<a class="" href="javascript:;">统计报表</a>
							<dl class="layui-nav-child">
								<dd><a class="crmsidemenu" crmurl="statement/displayAmount.html" href="javascript:;">客户贡献分析</a></dd>
								<dd><a class="crmsidemenu" crmurl="statement/analysisCustomer.html" href="javascript:;">客户构成分析</a></dd>
								<dd><a class="crmsidemenu" crmurl="service/serveStatistics.html" href="javascript:;">服务构成分析</a></dd>
								<!-- <dd><a class="crmsidemenu" crmurl="" href="javascript:;">客户流失分析</a></dd> -->
							</dl>
						</li>
					</ul>
				</div>
			</div>

			<div class="layui-body">
				<!-- 内容主体区域 -->
				<div style="padding: 15px;" class="mainContent">
					<div class="container">
						<div class="nav">
							<input type="radio" name="radio-set" checked id="nav1">
							<a href="#panel1">导航1</a>
							<input type="radio" name="radio-set" id="nav2">
							<a href="#panel2">导航2</a>
							<input type="radio" name="radio-set" id="nav3">
							<a href="#panel3">导航3</a>
							<input type="radio" name="radio-set" id="nav4">
							<a href="#panel4">导航4</a>
							<input type="radio" name="radio-set" id="nav5">
							<a href="#panel5">导航5</a>
						<div class="scroll">
							<section class="panel" id="panel1">
								<div class="icon" data-icon="a"></div>
								<h1>太阳花电子科技公司</h1>
								<p>成立于2020年7月15日，公司成员总共14人</p>
							</section>
							<section class="panel panelColor" id="panel2">
								<div class="icon" data-icon="b"></div>
								<h1>营销管理模块</h1>
								<p>这部分由我们公司帅气的罗进、卢志强、杨家乐和魏峻铃联合完成</p>
								<p>实现功能有创造销售机会、编辑销售机会、删除销售机会、指派销售机会</p>
								<p>制定开发计划、执行开发计划、开发成功、开发失败</p>
							</section>
							<section class="panel" id="panel3">
								<div class="icon" data-icon="c"></div>
								<h1>客户管理模块</h1>
								<p>这部分由我们公司美撼凡尘的田婷、王炫、李富彬联合完成</p>
								<p>实现功能有编辑客户基本信息、管理客户联系人、编辑客户的交往记录</p>
								<p>查看客户的历史订单</p>
							</section>
							<section class="panel panelColor" id="panel4">
								<div class="icon" data-icon="d"></div>
								<h1>服务管理模块</h1>
								<p>这部分由我们公司倾国倾城的女子团队姚珊珊、张祎张弘艺联合完成</p>
								<p>实现功能有服务创建、服务分配、服务处理、服务反馈、服务归档</p>
							</section>
							<section class="panel" id="panel5">
								<div class="icon" data-icon="e"></div>
								<h1>统计报表</h1>
								<p>这部分由我们公司清新俊逸的罗世林和钟俊伟联合完成</p>
								<p>实现功能有客户贡献分析、客户构成分析、服务构成分析</p>
							</section>
					 
						</div>
						</div>
					</div>
				</div>
			</div>

		</div>
		<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<!-- 引入 ECharts 文件 -->
		<script src="js/echarts.js" type="text/javascript" charset="utf-8"></script>
		<script>
			//一般直接写在一个js文件中
			layui.use(['layer', 'element', 'jquery'], function() {
				var layer = layui.layer
				var $ = layui.jquery

				//给二级菜单添加单击事件
				$(".crmsidemenu").click(function() {
					//this被点击那个a标签；attr方法获取指定属性的值
					var url = $(this).attr("crmurl")
					//ajax异步提交来获取url对应页面的内容
					$.get(url, null, function(content) {
						//把异步提交返回的页面替换中间区域的div的内容
						$(".layui-body").children(0).html(content)
					})
				})
			});
		</script>
	</body>
</html>
